<template>
  <div id="basicLayout" :style="isMobile ? 'min-width: auto;' : ''">
    <a-layout class="basic-layout">
      <a-layout-sider
        class="basic-layout-sider hide-scroller-bar"
        v-model:collapsed="collapsed"
        collapsible
        breakpoint="lg"
        :collapsed-width="collapsedWidth"
        :style="siderStyle"
        theme="light"
        :width="uncollapseWidth"
        :trigger="null"
        @collapse="onCollapse"
        @mouseover="showColBtn = true"
        @mouseleave="showColBtn = false"
      >
        <!-- 左侧菜单 -->
        <side-menu @settingClick="handleSettingClick"></side-menu>
        <div
          class="col-btn unselect"
          @click="onCollapse"
          :style="{ bottom: colBtnBottom }"
          v-if="menuType == 1 && showColBtn"
        >
          {{ collapsed ? $t("展开") : $t("收起") }}
          <LeftOutlined class="icon" v-if="!collapsed" key="uncollapsed_icon" />
          <RightOutlined class="icon" v-if="collapsed" key="collapsed_icon" />
        </div>
      </a-layout-sider>
      <a-layout-content :style="contentStyle">
        <div id="routeView" style="height: 100%">
          <router-view v-slot="{ Component }">
            <keep-alive :include="keepAliveRoutes">
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </div>
        <div class="maximize" @click.stop="closeMax" v-if="showMaxContent">
          <CloseOutlined style="color: #fff; padding-bottom: 4px; font-size: 14px" class="icon"/>
        </div>
      </a-layout-content>
    </a-layout>

    <setting-modal
      v-if="showSetting"
      :left="menuWidth"
      @settingClick="handleSettingClick"
    ></setting-modal>
    <template v-if="loadingComponents">
      <!-- 邀请同事 -->
      <invitation
        :visible="invitationChange"
        @close="invitationChange = false"
      />
      <!-- 帮助与客服 -->
      <help :visible="helpChange" @close="helpChange = false" />
      <!-- 切换公司 -->
      <change-company
        :visible="changeCompanyVisible"
        @close="changeCompanyVisible = false"
      />
    </template>
    <!-- 选择楼宇 -->
    <CheckedBuilding
      :visible="checkBuildingVisible"
      @close="checkBuildingVisible = false"
    />

    <CommonMicro />
    <BillDetailDrawer
      v-if="billDetailVisible"
      :visible="billDetailVisible"
      :id="bill_id"
      showType="modal"
      @cancel="onBillDetailClose"
    ></BillDetailDrawer>

    <!-- 收支流水详情 -->
    <TurnoverDetailDrawer
      :visible="showTurnover"
      :id="bill_stream_id"
      @handleCancel="onTurnoverDetailClose"
    />

    <!-- 新建收支流水   -->
    <a-drawer
      :closable="false"
      :visible="turnoverVisible"
      :width="1100"
      :body-style="{
        padding: 0,
        height: '100%',
        background: '#f7f7f7',
      }"
      :destroyOnClose="true"
      :headerStyle="{ padding: 0 }"
      @close="onTurnoverClose"
      :key="Math.random()"
    >
      <NewTurnover
        :isDrawer="true"
        :ownerIdByDrawer="addTurnoverOwnerId"
        :bindExtraInfo="addTurnoverInfo"
        @cancel="onTurnoverClose"
        @save="onTurnoverClose"
      />
    </a-drawer>
  </div>
</template>

<script>
import { computed, defineComponent, watch, reactive, toRefs, ref } from "vue";
import { RightOutlined, LeftOutlined, CloseOutlined } from "@ant-design/icons-vue";
import defaultSetting from "../common/utils/defaultSetting";
import SideMenu from "./commonModules/SideMenu.vue";
import SettingModal from "./commonModules/SettingModal/index.vue";
import invitation from "./commonModules/SettingModal/modules/invitation.vue";
import Help from "./commonModules/SettingModal/modules/help.vue";
import { useRoute } from "vue-router";
import store from "../store";
import CheckedBuilding from "./commonModules/CheckedBuilding/index.vue";
import routes from "../router/router.config";
import utils from "../common/utils/utils";
import ChangeCompany from "./commonModules/SettingModal/modules/ChangeCompany.vue";
import CommonMicro from "../components/CommonMicro/index.vue";

import BillDetailDrawer from "../views/bill/BillDetail/modules/BillDetailDrawer.vue";
import TurnoverDetailDrawer from "../views/bill/TurnoverDetail/modules/TurnoverDetailDrawer.vue";
import NewTurnover from "@/views/bill/NewTurnover/index.vue";
// 菜单收起时宽度
const COLLAPSED = defaultSetting.COL_WIDTH;
// 菜单未收起时宽度
const UNCOLLAPSE = defaultSetting.UNCOL_WIDTH;

export default defineComponent({
  name: "BasicLayout",
  components: {
    NewTurnover,
    RightOutlined,
    LeftOutlined,
    SideMenu,
    SettingModal,
    invitation,
    Help,
    CheckedBuilding,
    ChangeCompany,
    CommonMicro,
    BillDetailDrawer,
    TurnoverDetailDrawer,
    CloseOutlined,
  },
  setup() {
    const $route = useRoute();

    const state = reactive({
      collapsed: false,
      showColBtn: false,
      showSetting: false,
      colBtnBottom: `${defaultSetting.UNCOL_ITEM_HEIGHT * 2 + 10}px`,
      invitationChange: false,
      helpChange: false,
      keepAliveRoutes: [],
      changeCompanyVisible: false,
      uncollapseWidth: 0,
      collapsedWidth: COLLAPSED,
      loadingComponents: false,
      isMobile: false,
      checkBuildingVisible: false,
      billDetailVisible: false,
      bill_id: "",

      showTurnover: false,
      bill_stream_id: "",
      turnoverVisible: false,
    });
    watch(
      () => store.getters.showBillDetailDrawer,
      (val) => {
        state.billDetailVisible = val;
      }
    );
    watch(
      () => store.getters.bill_id,
      (val) => {
        state.bill_id = val;
      }
    );

    // 收支流水详情
    watch(
      () => store.getters.showTurnoverDrawer,
      (val) => {
        state.showTurnover = val;
      }
    );
    watch(
      () => store.getters.bill_stream_id,
      (val) => {
        state.bill_stream_id = val;
      }
    );

    watch(
      () => store.getters.addTurnoverVisible,
      (val) => {
        state.turnoverVisible = val;
      }
    );

    const addTurnoverInfo = computed(() => store.getters.addTurnoverInfo);
    const addTurnoverOwnerId = computed(() => store.getters.addTurnoverOwnerId);

    const onTurnoverClose = () => {
      store.commit("SET_SHOW_ADD_TURNOVER", false);
      store.commit("SET_ADD_TURNOVER_INFO", {});
      store.commit("SET_ADD_TURNOVER_VISIBLE", false);
      store.commit("SET_ADD_TURNOVER_OWNER_ID", 0);
    };

    const onBillDetailClose = () => {
      store.commit("SET_SHOW_BILL_DETAIL_DRAWER", false);
      state.billDetailVisible = false;
    };
    const menuType = computed(() => store.getters.userInfo.pc_menu_type);
    const isCustomSide = computed(() => !!store.getters.customSideMenu);
    const showMaxContent = computed(() => !!store.getters.showMaxContent);
    // const menuType = ref(2);

    const onTurnoverDetailClose = () => {
      store.commit("SET_SHOW_TYRNOVER_DRAWER", false);
      state.showTurnover = false;
    };

    watch(menuType, () => {
      initMenuWidth();
    });

    const initMenuWidth = () => {
      if (menuType.value == 2) {
        state.uncollapseWidth = isCustomSide.value ? 240 : defaultSetting.NORMAL_MENU_WIDTH;
        if (isCustomSide.value) {
          state.collapsedWidth = 145;
        }
      } else {
        state.uncollapseWidth = UNCOLLAPSE;
      }
    };

    const contentStyle = computed(() => ({
      paddingLeft: showMaxContent.value ? 0 : menuWidth.value + "px",
    }));

    const menuStyle = computed(() => ({
      position: "absolute",
      left: menuWidth.value + "px",
      top: 0,
      bottom: 0,
      zIndex: 990,
      overflow: "hidden",
    }));

    const menuWidth = computed(() =>
      state.collapsed ? state.collapsedWidth : state.uncollapseWidth
    );

    const onCollapse = () => {
      state.collapsed = !state.collapsed;
      state.colBtnBottom = state.collapsed
        ? `${defaultSetting.COL_ITEM_HEIGHT * 2 + 10}px`
        : `${defaultSetting.UNCOL_ITEM_HEIGHT * 2 + 10}px`;
      store.dispatch("SetCollapsed", state.collapsed);
    };

    const handleSettingClick = (e) => {
      if (e && e.current) {
        if (e.current.alias === "inviteColleague") {
          state.invitationChange = true;
        }
        if (e.current.alias === "getHelp") {
          state.helpChange = true;
        }
        if (e.current.alias === "changeCompany") {
          state.changeCompanyVisible = true;
        }
      } else {
        state.showSetting = !state.showSetting;
      }
    };

    const handleBuildingCheck = () => {
      state.checkBuildingVisible = true;
    };

    const hideLeftMenu = (isHide = true) => {
      if (isHide) {
        state.uncollapseWidth = 0;
        state.collapsedWidth = 0;
        state.loadingComponents = false;
      } else {
        state.collapsedWidth = COLLAPSED;
        state.loadingComponents = true;
        initMenuWidth();
      }
    };

    watch(
      () => store.getters.collapsed,
      (val) => {
        if (val != state.collapsed) {
          state.collapsed = val;
        }
      }
    );

    const init = () => {
      if (menuType.value == 2) {
        store.dispatch("SetCollapsed", false);
        state.collapsed = false;
      } else {
        state.collapsed = store.getters.collapsed;
      }
      let routesArr = [];
      utils.getKeepAliveRoutes(routes, routesArr);
      state.keepAliveRoutes = routesArr;
      state.isMobile = store.getters.isMobile;
      hideLeftMenu(store.getters.isMobile || store.getters.isIframe);
    };

    watch(
      () => store.getters.isMobile,
      (val) => {
        state.isMobile = val;
        hideLeftMenu(val);
      }
    );

    init();

    const isIframe = computed(() => store.getters.isIframe);

    const closeMax = () => {
      store.dispatch("setShowMaxContent", false);
    };
    const siderStyle = computed(() => {
      return {
        position: "absolute",
        left: 0,
        top: 0,
        bottom: 0,
        zIndex: 999,
        background:
          menuType == 1 ? defaultSetting.primaryColor : "rgb(0, 69, 198)",
        color: "rgba(255, 255, 255, 0.8)",
        display: showMaxContent.value ? 'none' : '',
      }
    });

    return {
      ...toRefs(state),
      menuWidth,
      contentStyle,
      menuStyle,
      siderStyle,
      onCollapse,
      handleSettingClick,
      handleBuildingCheck,
      menuType,
      onBillDetailClose,
      isIframe,
      onTurnoverDetailClose,
      addTurnoverInfo,
      addTurnoverOwnerId,
      onTurnoverClose,
      closeMax,
      showMaxContent,
    };
  },
});
</script>

<style lang="less" scoped>
@listItemHeight: 40px;
#basicLayout {
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  min-width: 1200px;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  .basic-layout {
    height: 100%;
    box-sizing: border-box;
    .basic-layout-sider {
      width: 100%;
      height: 100%;
      .col-btn {
        position: absolute;
        right: 0;
        // bottom: 90px;
        width: 20px;
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        border-radius: 2px 0px 0px 2px;
        font-size: 12px;
        text-align: center;
        // padding: 4px;
        cursor: pointer;
        transform: scale(0.9);
        z-index: 99;
        .icon {
          padding: 4px;
        }
      }
    }
  }
}
.maximize {
  position: fixed;
  top: -25px;
  left: 50%;
  z-index: 999;
  width: 45px;
  height: 45px;
  cursor: pointer;
  background-color: #b1b3b8;
  border-radius: 50%;
  opacity: .7;
  transform: translate(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  &:hover {
    background-color: #909399;
  }
}
</style>
